<template>
  <div>
    <template v-for="item in treeData">
      <el-submenu
        :index="item.id"
        :key="item.id"
        v-if="
          item.children && item.children.length > 0 && item.alwaysShow == 'true'
        "
      >
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{ item.name }}</span>
        </template>
        <SidebarItem :treeData="item.children"></SidebarItem>
      </el-submenu>
      <router-link :to="item.path" :key="item.id"  v-else>
        <el-menu-item :index="item.path">
          {{ item.name }}
        </el-menu-item>
        </router-link>
    </template>
  </div>
</template>

<script>
export default {
  name: "SidebarItem",
  props: {
    treeData: {
      type: Array,
      default: []
    }
  }
};
</script>

<style>
.el-menu-item.is-active {
  background: #1a86ee !important;
}
</style>
